{% extends '../../common/layouts/layout.tpl' %}
{% block content %}
	<div class="container">
        <div class="column">
            <div class="page-box">
                <div class="real-form reg-form">
                    <div class="form-header">
                        <h2>免费注册ThankFund账户</h2>
                        <p class="mt-20">已有账户？ <a href="#">登录</a></p>
                    </div>
                    <div class="form-body mt-10">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="text" name="mobile" id="mobile" lay-verify="mobile" autocomplete="off"
                                           placeholder="手机号" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="password" name="password" lay-verify="password" autocomplete="off"
                                           placeholder="密码" class="layui-input">
                                    <span class="form-tips">建议密码由8位以上数字、字母和特殊字符组成。</span>
                                </div>
                            </div>
                            <div class="layui-form-item" id="captcha-item" style="display: none;">
                                <input type="text" name="captcha" lay-verify="captcha" placeholder="验证码" class="layui-input" >
                                <img src="/common/captcha/get" onclick="this.src='/common/captcha/get?r='+Math.random();"/>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline">
                                    <input type="text" name="verify_code" lay-verify="verify_code" autocomplete="off"
                                           placeholder="短信验证码" class="layui-input">
                                </div>
                                <div class="f-r"><input class="but-border" onclick="sendSMS()" value="获取验证码"/></div>
                            </div>
                            <div class="layui-form-item">
                                <div class="invite-phone"><span class="icon"></span>推荐人手机（选填）</div>
                                <label class="layui-form-label"> </label>
                                <div class="layui-input-inline invite-input">
                                    <input type="text" name="invite_code" lay-verify="invite_code" autocomplete="off"
                                           placeholder="推荐人手机号" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item submit-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-normal btn-submit" lay-submit="" lay-filter="submit" onclick="return false;">注&nbsp;&nbsp;册</button>
                                    <span class="reg-declaration mt-30">
                                        <input type="checkbox" lay-skin="primary" title="我已经阅读并同意<a href='#'>《ThankFund注册协议》</a>" checked="checked" id="i-do">

                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js_assets %}
<script>
    layui.use(['form'], function () {
        var form = layui.form;

        form.verify({
            mobile : function(value){
                var reg=/^1[3|4|5|7|8][0-9]{9}$/;
                if(!reg.test(value)){
                    return '手机号码格式有误';
                }
            },
            password : function (value) {
                if(!passwordReg.test(value)){
                    return value.trim().length == 0 ? '请输入登录密码' : passwordErrorMsg;
                }
            }
        });

        //监听提交
        form.on('submit(submit)', function (data) {
            //注册
            $.post("/reg_mobile", data.field, function (result) {
                if (result.status != 200) {
                    layer.msg(result.msg || "注册失败", {icon: 2, time: 6000});
                    return false
                }
                layer.msg("注册成功", {icon: 1, time: 1000,}, function () {
                    window.location.href = "register_complete"
                }, 100)
            });
            return false;
        });
    });
    $('.invite-phone').click(function(){
        var inviteHeight = $('.invite-input').height();
        if(inviteHeight == "100"){
            $('.invite-input').css('height','0');
        }
        else{
            $('.invite-input').css('height','100px');
        }
    })

    //发送验证码
    function sendSMS() {
        var mobile = $("#mobile").val();
        $.ajax({
            url: "/common/send_sms",
            async: false,
            data: {mobile: mobile},
            type: "post",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            success: function (data) {
                if (data.status == 200) {
                    layer.msg("短信发送成功，请注意查收", {icon: 1, time: 1000,})
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    }
</script>
{% endblock %}